<template>
  <div>
    <!--计算属性 -->
    <p @click="count++">count:{{ count }}</p>
    <p>计算属性: {{ doubleCount }}</p>

    <hr />

    <p>
      <input type="text" v-model="firstname" />
    </p>
    <p>
      <input type="text" v-model="lastname" />
    </p>
    <p>
      <input type="text" v-model="fullname" />
    </p>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";

const count = ref(0);

// 创建一个计算属性
// 语法:  const 计算属性值 = computed(()=>{ return 返回值就是计算属性的值})
const doubleCount = computed(() => {
  return count.value * 2;
});

// 计算属性的常规写法, 可以修改计算属性
const firstname = ref("");
const lastname = ref("");

const fullname = computed({
  get() {
    return firstname.value + lastname.value;
  },
  set(val) {
    // val 就是修改的fullname 的值
    firstname.value = val.substr(0, 1);
    lastname.value = val.substr(1);
  },
});
</script>
<style scoped>
</style>